<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			html,body { margin: 0; height: 100%; }
      #c { width: 100%; height: 100%; display: block; }
		</style>
	</head>
	<body>
    <canvas id="c"></canvas>
		<script src="../js/three.js"></script>
		<script>
      function main() {
        const canvas = document.querySelector('#c')
        const renderer = new THREE.WebGLRenderer({canvas})

        const fov = 40
        const aspect = 2
        const near = 0.1
        const far = 1000
        const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
        camera.position.set(0, 50, 0)
        camera.up.set(0, 0, 1)
        camera.lookAt(0, 0, 0)

        const scene = new THREE.Scene()

        {
          const color = 0xFFFFFF
          const intensity = 3
          const light = new THREE.PointLight(color, intensity)
          scene.add(light)
        }

        const objects = []

        const radius = 1
        const widthSegments= 6
        const heightSegments = 6
        const sphereGeometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments)

        // 添加一个空的场景图节点
        const solarSystem = new THREE.Object3D()
        scene.add(solarSystem)
        objects.push(solarSystem)

        // 太阳
        const sunMaterial = new THREE.MeshPhongMaterial({emissive: 0xFFFF00})
        const sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial)
        sunMesh.scale.set(5, 5, 5)
        solarSystem.add(sunMesh)
        objects.push(sunMesh)

        const earthOrbit = new THREE.Object3D()
        earthOrbit.position.x = 10
        solarSystem.add(earthOrbit)
        objects.push(earthOrbit)

        // 地球
        const earthMaterial = new THREE.MeshPhongMaterial({color: 0x2233FF, emissive: 0x112244})
        const earthMesh = new THREE.Mesh(sphereGeometry, earthMaterial)
        earthOrbit.add(earthMesh)
        objects.push(earthMesh)

        const moonOrbit = new THREE.Object3D()
        moonOrbit.position.x = 2
        earthOrbit.add(moonOrbit)

        // 月亮
        const moonMaterial = new THREE.MeshPhongMaterial({color: 0x888888, emissive: 0x222222})
        const moonMesh = new THREE.Mesh(sphereGeometry, moonMaterial)
        moonMesh.scale.set(.5, .5, .5)
        moonOrbit.add(moonMesh)
        objects.push(moonMesh)

        function resizeRendererToDisplaySize(renderer) {
          const canvas = renderer.domElement
          const width = canvas.clientWidth
          const height = canvas.clientHeight
          const needResize = canvas.width !== width || canvas.height !== height
          if (needResize) {
            renderer.setSize(width, height, false)
          }
          return needResize
        }

        function render(time) {
          time *= 0.001

          if (resizeRendererToDisplaySize(renderer)) {
            const canvas = renderer.domElement
            camera.aspect = canvas.clientWidth / canvas.clientHeight
            camera.updateProjectionMatrix()
          }

          objects.forEach((obj) => {
            obj.rotation.y = time
          })

          renderer.render(scene, camera)

          requestAnimationFrame(render)
        }
        requestAnimationFrame(render)
      }

      main()
    </script>
	</body>
</html>